<%@ page contentType="text/html;charset=UTF-8" language="java"  import="java.util.*" trimDirectiveWhitespaces="true" %>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>网站日志统计</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <%@include file="/WEB-INF/pages/common/commonCss.jsp"%>
  <link rel="stylesheet" href="${basePath}/resources/css/uniform.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/select2.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/matrix-style.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/matrix-media.css" />
  <link rel="stylesheet" href="${basePath}/resources/css/admin/list.css" />
  <script type="text/javascript" src="${basePath}/resources/js/date/WdatePicker.js"></script>

</head>

<body>

<!--Header-part-->
<%@include file="/WEB-INF/pages/common/head.jsp"%>


<!--sidebar-menu-->
<%@include file="/WEB-INF/pages/common/left.jsp"%>

<div id="content">
  <div id="content-header">
    <div id="breadcrumb"> <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 首页</a> <a href="#" class="current">Tables</a> </div>
    <h1>日志管理</h1>
  </div>

  <div class="container-fluid">

    <hr>
    <div class="row-fluid">
      <div class="span12">
        <div class="widget-box">
          <div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
            <h5>Real Time chart</h5>
            <%--<select onchange="loadData(this.value)" style="margin-top:0.2rem">--%>
              <%--<option>请选择年份</option>--%>
              <%--<c:forEach begin="2010" end="2020" var="year">--%>
                <%--<option value="${year}">${year}</option>--%>
              <%--</c:forEach>--%>
            <%--</select>--%>
            <div style=padding:0.2rem;">
              <input type="text"  id="date" onFocus="WdatePicker({onpicking:changeDate,dateFmt:'yyyy'})" class="Wdate"/>
            </div>
          </div>
          <div class="widget-content">
            <div id="main" style="height: 400px;"></div>
            <p>Time between updates:
              <input id="updateInterval" type="text" value="" style="text-align: right; width:5em">
              milliseconds</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row-fluid">
      <div class="span12">


        <div class="widget-box">
          <div class="widget-title"> <span class="icon"><i class="icon-th"></i></span>
            <h5>Data table</h5>
            <select id="sort" style="margin-top: 0.2rem">
              <option value="asc">升序</option>
              <option value="desc" selected="selected">降序</option>
            </select>
            <a style="float: right;margin-top: 0.2rem" onclick="tzAdmin.search()" class="btn btn-success"><i class="icon-search icon-white"></i></a>

            <label style="float: right;margin-top: 0.2rem">
              <input type="text" id="keywords" aria-controls="DataTables_Table_0" placeholder="输入查询关键字">
            </label>

          </div>
          <div class="widget-content nopadding">

            <table class="table table-bordered data-table">
              <thead>

              <tr>
                <th>主键</th>
                <th>标题 <span class="up"></span> <span class="down"></span></th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody id="tbody" data-model="adminstat">
              <tr>
                <td id="loading" colspan="50"></td>
              </tr>


              </tbody>
              <tfoot>

              </tfoot>
            </table>
            <div class="cpage"></div>

          </div>
        </div>
      </div>
    </div>

  </div>
</div>

   <!--Footer-part-->
<%@include file="/WEB-INF/pages/common/footer.jsp"%>

<!--end-Footer-part-->

<%@include file="/WEB-INF/pages/common/commonJS.jsp"%>
   <script type="text/javascript" src="${basePath}/resources/sg/tz_page.js"></script>
   <script src="${basePath}/resources/js/jquery.ui.custom.js"></script>
<script src="${basePath}/resources/js/bootstrap.min.js"></script>
<script src="${basePath}/resources/js/jquery.uniform.js"></script>
<script src="${basePath}/resources/js/select2.min.js"></script>
<script src="${basePath}/resources/js/jquery.dataTables.min.js"></script>
<script src="${basePath}/resources/js/matrix.js"></script>
<script src="${basePath}/resources/js/echart/echarts.js"></script>

<%--<script src="${basePath}/resources/js/matrix.tables.js"></script>--%>

<script>

  $(function(){
    loadData(new Date().getFullYear());
  });

  // 点击日期的回调函数
  function changeDate(dp){
    var date = dp.cal.getNewDateStr();
    loadData(date);
  }

  //数据加载，初始化统计报表
  function loadData(year){
    $.ajax({
      type:"post",
      url:adminPath+"/stat/list",
      data:{year:year},
      success:function(data){
        var json = {
          title:year+"年度xx网站模块访问详情",
          datas:parseData(data)
        };
        initChart("main",json);//初始化统计报表
      }
    });
  };

  //数据月份补零
  function parseData(jsonArr){
    var jsonObj = {};
    for(var key in jsonArr){
      var num = jsonArr[key].num;
      var m = jsonArr[key].m;
      jsonObj["s"+parseInt(m)]= num;
    };
    var arr = [];
    for(var i=1;i<=12;i++){
      arr.push(jsonObj["s"+i]||0);
    }
    return arr;
  };


  //统计报表的初始化
  function initChart(targetId,json){
    require.config({
      paths: {
        echarts: basePath+'/resources/js/echart'
      }
    });
    require(
            [
              'echarts',
              'echarts/chart/bar',
              'echarts/chart/pie'
            ],
            function (ec) {
              var myChart = ec.init(document.getElementById(targetId));
              var option  = {
                title : {
                  x: "center",
                  text: json.title,
                  subtext: "月份/总数"
                },
                tooltip : {
                  trigger: 'axis'
                },

                toolbox: {
                  show : true,
                  feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                  }
                },

                calculable : true,
                xAxis : [
                  {
                    type : 'category',
                    data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                  }
                ],
                yAxis : [
                  {
                    type : 'value'
                  }
                ],
                series : [
                  {
                    name:'访问人数',
                    type:'bar',
                    data:json.datas,
                    markPoint : {
                      data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                      ]
                    },
                    /*itemStyle: {
                     normal:{
                     label:{
                     show: true,
                     formatter: '{c}'
                     },
                     labelLine :{show:true}
                     }
                     },*/
                    markLine : {
                      data : [
                        {type : 'average', name: '平均值'}
                      ]
                    }
                  }
                ]
              };
              //添加报表数据给echart
              myChart.setOption(option);
              //初始化echart的config对象
              var ecConfig = require('echarts/config');
              //执行config的回调函数
              myChart.on(ecConfig.EVENT.CLICK, eConsole);
            }
    );
  };

  //点击柱形图回调事件
  // 		var timer = null;
  // 		function eConsole(d) {
  // 			//获取用户点击的数据
  // 			var month = parseInt(d.name);
  // 			//参数
  // 	 		var params ={
  //  				month:month,
  //  				order:"create_time desc",
  //  				pageNo:0,
  //  				pageSize:30
  // 	 		};
  // 			loading2($("#tbody"),4);
  // 			//执行业务
  // 			clearTimeout(timer);
  // 	 		timer = setTimeout(function(){
  // 	 			$.ajax({
  // 		 			type:"post",
  // 		 			url:adminPath+"/adminstat/groupcontent",
  // 		 			data:params,
  // 		 			success:function(data){
  // 		 				var len = data.length;
  // 		 				var html = "";
  // 		 				for(var i=0;i<len;i++){
  // 		 					html+="<tr>"+
  // 		 					"	<td>"+data[i].id+"</td>"+
  // 		 					"	<td>"+data[i].title+"</td>"+
  // 		 					"	<td>"+data[i].time+"</td>"+
  // 		 					"	<td>操作</td>"+
  // 		 					"</tr>";
  // 		 				}
  // 		 				$("#tbody").html(html);
  // 		 			}
  // 		 		});
  // 	 		},200);
  // 		};


  var mark = true;
  function eConsole(d) {
    if(d.value == 0){
      $("#tbody").html("暂无数据");
      return;
    }
    //获取用户点击的数据
    var month = parseInt(d.name);
    var sort = document.getElementById("sort").value||"desc";
    alert(sort);
    //参数
    var params ={
      month:month,
      order:"create_time "+sort,
      pageNo:0,
      pageSize:30
    };
    loading2($("#tbody"),4);
    if(mark){
      mark = !mark;
      //执行业务
      $.ajax({
        type:"post",
        url:adminPath+"/adminstat/groupcontent",
        data:params,
        error:function(){mark=true;},
        success:function(data){
          var len = data.length;
          var html = "";
          for(var i=0;i<len;i++){
            html+="<tr>"+
            "	<td>"+data[i].id+"</td>"+
            "	<td>"+data[i].title+"</td>"+
            "	<td>"+data[i].time+"</td>"+
            "	<td>操作</td>"+
            "</tr>";
          }
          $("#tbody").html(html);
          mark = true;
        }
      });
    }
  };

  // 		function initChart(targetId,json){
  //			var myChart = echarts.init(document.getElementById(targetId));
  //			var option  = {
  //				    title : {
  //				    	x: "center",
  //				        text: json.title,
  //				        subtext: "月份/总数"
  //				    },
  //				    tooltip : {
  //				        trigger: 'axis'
  //				    },

  //				    toolbox: {
  //				        show : true,
  //				        feature : {
  //				            mark : {show: true},
  //				            dataView : {show: true, readOnly: false},
  //				            magicType : {show: true, type: ['line', 'bar']},
  //				            restore : {show: true},
  //				            saveAsImage : {show: true}
  //				        }
  //				    },

  //				    calculable : true,
  //				    xAxis : [
  //				        {
  //				            type : 'category',
  //				            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  //				        }
  //				    ],
  //				    yAxis : [
  //				        {
  //				            type : 'value'
  //				        }
  //				    ],
  //				    series : [
  //				        {
  //				            name:'访问人数',
  //				            type:'bar',
  //				            data:json.datas,
  //				            markPoint : {
  //				                data : [
  //				                    {type : 'max', name: '最大值'},
  //				                    {type : 'min', name: '最小值'}
  //				                ]
  //				            },
  //				            markLine : {
  //				                data : [
  //				                    {type : 'average', name: '平均值'}
  //				                ]
  //				            }
  //				        }
  //				    ]
  //				};
  //			myChart.setOption(option);
  //			myChart.on(ecConfig.EVENT.CLICK, eConsole);
  //			myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
  //			myChart.on(ecConfig.EVENT.HOVER, eConsole);
  //			myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
  //			myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
  //			myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
  //			myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
  //		}
</script>

</body>
</html>
